@import "_mixin";
@import "_variables";

.f {
  display: flex;
}


$flex-type: (r:row-reverse, c: column, cr: column-reverse);
@each $type in map-keys($flex-type) {
  .f-#{$type} {
    @extend .f;
    flex-direction: map-get($flex-type, $type)
  }
}

//flex-xx flex盒子所占份数、顺序
@for $f from 1 through 5 {
  .f-#{$f} {
    flex: $f;
  }

  .f-o-#{$f} {
    order: $f;
  }

  .g-#{$f * 5} {
    gap: $f * 5px;
  }
}

// flex盒子布局
$flex-spread: (ali: align-items, als: align-self, alc: align-content, jc: justify-content);
$flex-spread-v: (fs: flex-start, fe: flex-end, c: center, bl: baseline, st: stretch, sb: space-between, sa: space-around);
@each $item1 in map-keys($flex-spread) {
  @each $item2 in map-keys($flex-spread-v) {
    .f-#{$item1}-#{$item2} {
      @extend .f;
      #{map-get($flex-spread, $item1)}: map-get($flex-spread-v, $item2);
    }
  }
}

// margin-xx 1~30
$direction: (l: left, r: right, t: top, b: bottom);
@for $data from 1 through 30 {
  @each $d in map-keys($direction) {
    .m-#{$d}-#{$data} {
      @include margin(map-get($direction, $d), $data)
    }

    .p-#{$d}-#{$data} {
      @include padding(map-get($direction, $d), $data)
    }

    .b-#{$d}-#{$data} {
      @include border(map-get($direction, $d), $data)
    }
  }
  .m-#{$data} {
    margin: $data * 1px
  }

  .p-#{$data} {
    padding: $data * 1px
  }

  .b-#{$data} {
    border: $data * 1px solid black;
  }
}

// data 5~500
@for $data from 1 through 100 {
  .w-#{$data * 5} {
    width: $data * 5px;
  }

  .w-#{$data}p {
    width: $data * 1%;
  }

  .h-#{$data * 5} {
    height: $data * 5px;
  }

  .h-#{$data}p {
    height: $data * 1%;
  }

  .br-#{$data * 2} {
    border-radius: $data * 2px;
  }
}

// @primary $theme-color 来自_variables.scss
@each $c in map-keys($theme-colors) {
  .c-#{$c} {
    @include color(map-get($theme-colors, $c))
  }

  .bg-#{$c} {
    @include bg-color(map-get($theme-colors, $c))
  }

  .b-#{$c} {
    border-color: map-get($theme-colors, $c);
  }
}

// 字重
@each $fw-type in map-keys($font-weight-type) {
  .#{$fw-type} {
    font-weight: map-get($map: $font-weight-type, $key: $fw-type);
  }
}

@each $fs-type in map-keys($font-size-type) {
  .#{$fs-type} {
    font-size: map-get($map: $font-size-type, $key: $fs-type);
  }
}

// 箭头arrow
.arrow {
  display: block;
  $lenght: 6px;
  width: $lenght;
  height: $lenght;
  margin-left: 6px;
  border: 2px solid #d1d4da;
  border-left: none;
  border-bottom: none;
}

.transition {
  transition: all 0.4s ease;
}

.total {
  @extend .normal, .c-gray;
}